<template>
    <div class="modify-score">
        <header class="modify-header">
            <div class="left">
                <span class="arrow" @click="$router.back()"><i class="el-icon-arrow-left" />返回</span>
                <span>|</span>
                <span>成绩修改</span>
            </div>
            <div class="right">
                课程管理系统
            </div>
        </header>
        <main class="modify-main">
            <div class="form-container" style="line-height: 100px;text-align:center;">
                <el-form ref="form" :model="form" :rules="rules">
                    <el-row :gutter="20">
                        <!-- 第一列 -->
                        <el-col :span="12">
                            <el-form-item label="课程类型" prop="courseType">
                                <el-input v-model="form.courseType" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="课程名称" prop="courseName">
                                <el-input v-model="form.courseName" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="课程评分占比" prop="scoreRatio">
                                <el-input v-model="form.scoreRatio" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="班级名称" prop="className">
                                <el-input v-model="form.className" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="学生姓名" prop="studentName">
                                <el-input v-model="form.studentName" :disabled="true" />
                            </el-form-item>
                        </el-col>
                        <!-- 第二列 -->
                        <el-col :span="12">
                            <el-form-item label="平时分" prop="attendanceScore">
                                <el-input-number v-model="form.attendanceScore" :min="0" :max="100" style="width: 100%;"
                                    placeholder="请输入平时分0-100" />
                            </el-form-item>
                            <el-form-item label="作业分" prop="assignmentScore">
                                <el-input-number v-model="form.assignmentScore" :min="0" :max="100" style="width: 100%;"
                                    placeholder="请输入作业分0-100" />
                            </el-form-item>
                            <el-form-item label="小组分" prop="examScore">
                                <el-input-number v-model="form.examScore" :min="0" :max="100" style="width: 100%;"
                                    placeholder="请输入小组分0-100" />
                            </el-form-item>
                            <el-form-item label="总分" prop="totalScore">
                                <el-input v-model="form.totalScore" :disabled="true" />
                            </el-form-item>
                            <el-form-item>
                                <div class="btn-container">
                                    <el-button @click="$router.back()">返回</el-button>
                                    <el-button type="primary" @click="modifyScore">确认修改</el-button>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </main>
    </div>
</template>


<script>

import { getSudentCourseRecordAPI, editSudentCourseRecordAPI } from '@/api/score'
export default {
    data() {
        return {
            form: {
                gradeRecordsId: '',
                studentId: '',
                courseId: '',
                courseType: '',
                courseName: '',
                scoreRatio: '',
                className: '',
                studentName: '',
                attendanceScore: '',
                assignmentScore: '',
                examScore: '',
                totalScore: '',
            },
            rules: {
                attendanceScore: [
                    { required: true, message: '平时分必须填写0-100', trigger: 'blur' }
                ],
                assignmentScore: [
                    { required: true, message: '作业分分必须填写0-100', trigger: 'blur' }
                ],
                examScore: [
                    { required: true, message: '小组分必须填写0-100', trigger: 'blur' }
                ],
            }

        }
    },
    mounted() {
        this.getCourseIdAndStudentId()
        this.getSudentCourseRecord()
        // //计算总分
        this.getTotalScore()
    },
    //监听
    //设置deep: true 此时会给form的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行handler。
    watch: {
        form: {
            handler(newVal, oldVal) {
                // console.log('监听中');
                this.getCourseIdAndStudentId()
                this.getTotalScore()
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        //获取跳转页面携带的courseId,studentId
        getCourseIdAndStudentId() {
            this.form.courseId = this.$route.query.courseId
            this.form.studentId = this.$route.query.studentId
            // console.log('courseId studentId' + this.form.courseId + this.form.studentId);
        },
        //获取该学生成绩
        getSudentCourseRecord() { 
            getSudentCourseRecordAPI(this.form.courseId, this.form.studentId).then(res => {
                // console.log('获取该学生成绩' + res.data);
                this.form = {
                    gradeRecordsId: res.data.id || '',
                    studentId: res.data.studentId || '',
                    courseId: res.data.courseId || '',
                    courseType: res.data.courses.courseType || '',
                    courseName: res.data.courses.courseName || '',
                    scoreRatio: res.data.courses.scoreRatio || '',
                    className: res.data.students.className || '',
                    studentName: res.data.students.studentName || '',
                    attendanceScore: res.data.attendanceScore || '',
                    assignmentScore: res.data.assignmentScore || '',
                    examScore: res.data.examScore || '',
                    totalScore: res.data.totalScore || '',
                };
                // console.log('表单数据' + this.form);
            })
        },
        getTotalScore() {
            //评分占比数组
            // console.log('rrr' + this.form.courseId, this.form.studentId);
            getSudentCourseRecordAPI(this.form.courseId, this.form.studentId).then(response => {
                // if (!response || !response.data || !response.data.coursesExt || !response.data.coursesExt.scoreRatio) {
                //     throw new Error('无法获取评分占比数据');
                // }

                // 解析评分占比数组  
                const scoreRatioString = response.data.courses.scoreRatio;
                const scoreRatios = scoreRatioString.split("|").map(Number);

                // 分配各分项的占比  
                const atScoreWeighting = scoreRatios[0] || 0; // 平时分占比，默认为0  
                const asScoreWeighting = scoreRatios[1] || 0; // 作业分占比，默认为0  
                const exScoreWeighting = scoreRatios[2] || 0; // 小组分占比（这里可能是指考试分或其他，根据实际情况命名），默认为0  

                // 计算总分  
                this.form.totalScore = (
                    this.form.attendanceScore * (atScoreWeighting / 100) +
                    this.form.assignmentScore * (asScoreWeighting / 100) +
                    // 注意：这里使用exScoreWeighting可能是考试分或其他，根据实际情况调整  
                    this.form.examScore * (exScoreWeighting / 100)
                ).toFixed(2); // 可以选择保留两位小数，根据需求调整  

                // console.log('计算得到的总分：', this.form.totalScore);
            })

        },
        modifyScore() {
            //修改对象
            let editForm = {
                gradeRecordsId: this.form.gradeRecordsId || '',
                courseId: this.form.courseId || '',
                studentId: this.form.studentId || '',
                attendanceScore: this.form.attendanceScore || '',
                assignmentScore: this.form.assignmentScore || '',
                examScore: this.form.examScore || '',
                totalScore: this.form.totalScore || '',
            }
            // console.log('修改成绩' + editForm);
            //修改成绩
            editSudentCourseRecordAPI(editForm).then(res => {
                console.log(res)
                if (res.data === 1) {
                    this.$message.success('修改成功！')
                    this.getSudentCourseRecord()
                } else {
                    this.$message.error('修改失败！')
                }
            }).catch(() => {
                this.$message.error('输入有误，修改失败！')
            })

        }
    }
}
</script>


<style scoped lang="scss">
.btn-container {
    margin-top: 50px;
}

.modify-score {
    background-color: #f4f6f8;
    height: 100vh;

    .modify-header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        height: 64px;
        line-height: 64px;
        font-size: 16px;
        font-weight: bold;
        background-color: #fff;

        .left {
            span {
                margin-right: 4px;
            }

            .arrow {
                cursor: pointer;
            }
        }

        .right {
            text-align: right;
        }
    }

    .modify-main {
        background: #f4f6f8;
        padding: 20px 130px;

        .form-container {
            background-color: #fff;
            padding-left: 300px;
            padding-right: 300px;
            padding-bottom: 100px;

            .title {
                height: 60px;
                line-height: 60px;
                padding-left: 20px;
            }

            .form {
                margin-bottom: 20px;
                padding: 20px 65px 24px;

                .el-form {
                    display: flex;
                    flex-wrap: wrap;

                    .el-form-item {
                        width: 50%;
                    }
                }
            }
        }
    }
}

/* 或者，如果你想要全局地改变所有禁用输入框的样式 */
.el-input__inner.is-disabled {
    /* 自定义样式 */
    color: #ccc !important;
    /* 注意使用 !important 来覆盖默认样式 */
    background-color: #f5f5f5 !important;
    cursor: not-allowed !important;
}
</style>